<template>
  <div class="sectionOrStep">
    <el-radio-group v-model="ladderOrSubsection">
      <el-radio v-for="item in ladderOrSubsectionArr" :key="item.id" :label="item.id">{{ item.label }}</el-radio>
    </el-radio-group>
    <div class="steps">
      <div class="step" v-for="(step, index) in stepsGroup" :key="step.id">
        <el-input size="mini" v-model.number="step.minValue" :disabled="index != 0" @change="onMinChange(step, $event)">
          <template slot="append"> {{ unit }}</template>
        </el-input>
        <el-select size="mini" v-model="step.operatorType1" :disabled="index != 0 || step.minValue == 0">
          <el-option v-for="item in symbols" :key="item.id" :value="item.label" :label="item.label" />
        </el-select>
        <div>{{ name }}的{{ unit }}数</div>
        <template v-if="!step.insurance">
          <el-select size="mini" v-model="step.operatorType2" @change="setNext(step)">
            <el-option v-for="item in symbols" :key="item.id" :value="item.label" :label="item.label" />
          </el-select>
          <el-input size="mini" v-model.number="step.maxValue" @change="onMaxChange(step, $event)">
            <template slot="append"> {{ unit }}</template>
          </el-input>
        </template>
        <div>
          <span v-if="ladderOrSubsection == 2">的部分</span>
          ，按
        </div>
        <el-cascader style="width:110px" size="mini" v-model="step.calculationType" :options="types" @change="handleChange(step, $event)"></el-cascader>
        <el-input style="width:110px !important" size="mini" v-model.number="step.otherFormula">
          <template slot="append"> {{ step.metering }} </template>
        </el-input>
        <div class="btns" v-if="index == steps.length - 1">
          <div class="btn" @click="onAdd()">+</div>
          <div class="btn" v-if="index" @click="onDel(index)">-</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { symbols, types, ladderOrSubsectionArr, SYMBOLS, stepKeys } from "./config";
export default {
  name: "sectionOrStep",
  inject: {
    getLists: { default: () => [] }
  },
  props: {
    // 单位
    unit: {
      type: String,
      default: "分钟"
    },
    // 科目
    name: {
      type: String,
      default: "迟到"
    },
    type: {
      type: Number,
      default: null
    }
  },
  data() {
    this.symbols = symbols;

    this.ladderOrSubsectionArr = ladderOrSubsectionArr;
    this.initObj = {
      minValue: null,
      operatorType1: SYMBOLS.LESS_EQUAL,
      operatorType2: SYMBOLS.LESS,
      maxValue: null,
      calculationType: this.types?.[0]?.id || null,
      otherFormula: null,
      id: 1,
      metering: "元/次"
    };
    return {
      ladderOrSubsection: 1,
      steps: [],
      stepsLast: {}
    };
  },
  watch: {
    type: {
      handler(val) {
        this.steps.forEach(item => {
          this.cutType(item);
        });
        this.cutType(this.stepsLast);
      }
    }
  },
  computed: {
    types() {
      const arr = types
        .filter(item => item.types.includes(this.type))
        .map(item => {
          item.label;
          return {
            ...item,
            value: item.id,
            children: this.getHolidayType(item.children)
          };
        });
      return arr;
    },
    stepsGroup() {
      return [...this.steps, this.stepsLast];
    }
  },
  methods: {
    handleChange(step, e) {
      const [id, namePy] = e;
      this.onTypeChange(step, id);
      console.log(e);
    },
    getHolidayType(name) {
      if (!name) return null;
      const arr = this.getLists(name)
        .map(item => item.columnList.map(o => ({ label: o.name, value: o.namePy })))
        .flat();
      console.log(arr);
      return arr;
    },
    cutType(obj) {
      const o = this.types.find(o => o.id == obj.calculationType);
      if (!o) obj.calculationType = this.getDefaultType();
      this.onTypeChange(obj, obj.calculationType);
    },
    // 事件
    ...{
      onTypeChange(step, e) {
        const o = this.types.find(item => item.id == e);
        step.metering = o.metering;
      },
      onMinChange(step, e) {
        if (e == 0) step.operatorType1 = SYMBOLS.LESS;
      },
      onMaxChange(step, e) {
        const { operatorType2, minValue } = step;
        if (e <= minValue) {
          this.$message({ message: "数值过小", type: "warning" });
          step.maxValue = minValue + (operatorType2 == SYMBOLS.LESS_EQUAL ? 0 : 1);
        }
        this.setNext(step);
      },
      setNext(step) {
        const o = this.getNext(step);
        if (o) {
          const { minValue } = this.getValue(step);
          console.log(o);
          o.minValue = minValue;
          // if (o.maxValue <= minValue) o.maxValue = maxValue;
          // this.setNext(o); // 递归设置之后所有
        }
      },
      getNext(step) {
        return this.steps.find(item => item.id == step.id + 1) || this.stepsLast;
      },
      getValue(step) {
        console.log(step);
        let minValue = 0;
        let maxValue = 5;
        if (step) {
          minValue = step.maxValue;
          maxValue = minValue + 5;
          if (step.operatorType2 == SYMBOLS.LESS_EQUAL) minValue++;
        }
        return { minValue, maxValue };
      }
    },

    // 增减
    ...{
      onAdd(insurance = false) {
        const len = this.steps.length || 0;
        const { minValue, maxValue } = this.getValue(this.steps[len - 1]);
        const o = { ...this.initObj, id: len + 1, minValue, maxValue, calculationType: this.getDefaultType() };
        if (insurance) {
          this.stepsLast = { ...o, id: -1, insurance, maxValue: null, operatorType2: null };
        } else {
          this.steps.push(o);
          this.stepsLast.minValue = maxValue;
        }
      },
      onDel(i) {
        this.steps.splice(i, 1);
      },
      getDefaultType() {
        return [this.types?.[0]?.id] || null;
      }
    },
    // 外部调用
    ...{
      getParams() {
        const { ladderOrSubsection, stepsGroup } = this;
        return {
          ladderOrSubsection,
          steps: stepsGroup.map(item => {
            const { minValue, operatorType1, operatorType2, maxValue, calculationType, otherFormula } = item;
            let holidayNamePy = calculationType?.[1] || null;
            let data = {
              minValue,
              operatorType1,
              calculationType: calculationType[0],
              otherFormula
            };

            if (operatorType2) data.operatorType2 = operatorType2;
            if (maxValue) data.maxValue = maxValue;
            if (holidayNamePy) data.holidayNamePy = holidayNamePy;
            return data;
          })
        };
      },
      setData(steps = [], ladderOrSubsection = 1) {
        console.log(ladderOrSubsection, steps);
        this.steps = steps.map((item, id) => {
          const o = this.types.find(n => n.id == item.calculationType);
          let calculationType = [item.calculationType];
          if (item.holidayNamePy) calculationType.push(item.holidayNamePy);
          return {
            id,
            ...item,
            calculationType,
            metering: o?.metering
          };
        });
        this.stepsLast = { ...this.steps.pop(), insurance: true };

        this.ladderOrSubsection = ladderOrSubsection;
      },

      /** 验证 */
      verify() {
        let message = "";
        let bol = this.steps.every((item, i) => {
          let bol = stepKeys.every(n => item[n] || item[n] == 0);
          if (!bol) return bol;
          const { minValue, maxValue, operatorType2 } = item;
          if (operatorType2 == SYMBOLS.LESS_EQUAL && maxValue < minValue || operatorType2 == SYMBOLS.LESS && maxValue <= minValue) {
            message = `第${i + 1}行: 数值过大`;
            return false;
          }
          return true;
        });
        if (!this.stepsLast.otherFormula) {
          bol = false;
        }
        if (!bol) return { message, bol };
        return bol;
      }
    }
  },
  mounted() {
    this.onAdd();
    this.onAdd(true);
    this.onMinChange(this.steps[0], 0);
  }
};
</script>
<style lang="less" scoped>
.sectionOrStep {
  flex: 1;
  .el-radio-group {
    display: flex;
    flex-direction: row;
    .el-radio {
      margin: 10px !important;
    }
  }
  .steps {
    max-height: 200px;
    overflow: auto;
    width: calc(100% + 80px);
    .step {
      position: relative;
      width: 90%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .btns {
        display: flex;
        position: absolute;
        left: 100%;
        .btn {
          font-size: 25px;
          font-weight: bold;
          margin: 0 10px;
          cursor: pointer;
        }
      }
      .el-input,
      .el-select {
        width: 55px;
      }
      & > div {
        margin-right: 5px;
      }
      :deep(.el-input__inner) {
        border: 1px solid #dcdfe6 !important;
        border-radius: 4px !important;
        padding: 0 10px;
        display: block;
      }
      :deep(.el-input__suffix) {
        display: flex;
        align-items: center;
      }
      :deep( .is-disabled) {
        .el-input__inner {
          background-color: #eee !important;
        }
      }
      .el-input {
        :deep(.el-input__inner) {
          border: 1px solid #dcdfe6 !important;
          border-top-right-radius: 0 !important;
          border-bottom-right-radius: 0 !important;
        }
        width: 90px !important;
        :deep( .el-input-group__append) {
          padding: 0 10px;
        }
      }
    }
  }
}
</style>
